<script setup lang="ts">
import { reactive, ref } from "vue"
import { ElTabs, ElTabPane } from "element-plus";
import Nifi from "../../nifi";
//
import List from "./list.vue"
// import {t} from "../../i18n/index"
const emits = defineEmits<{close:[]}>()
const props = defineProps<{ groupId?: string, id?: string, nifi: Nifi }>();
const nifi = props.nifi;
const { groupId = nifi.group.id, id = '' } = props;
//
const activeName = ref(groupId);
//
const breadcrumb = nifi.group.breadcrumb
const gids = nifi.group.breadcrumbIds;
const Groups = reactive<{ name: string, id?: string,groupId:string }[]>(gids.slice(gids.indexOf(groupId)).map((n,i) => ({groupId:n,name:breadcrumb[n].name,id:i == 0 ? id : ''})))
// const Groups = reactive<{ name: string, id: string,groupId:string }[]>([{ name: nifi.group.breadcrumb[groupId].name,groupId, id }])
//
const handleAddGroup = (groupId:string,id:string) => {
    const d = Groups.find(d => d.groupId == groupId)
    if(d == undefined){
        Groups.push({groupId,name:nifi.group.breadcrumb[groupId].name,id})
    }
    else{
        d.id = id;
    }
    activeName.value = groupId;
}
//
const handleClose = () => {
    emits('close')
}

</script>

<template>
    <div class="w-60vw h-60vh">
        <ElTabs v-model="activeName" class=" h-full w-full overflow-hidden">
            <template v-for="g in Groups" :key="g.groupId">
                <ElTabPane :label="g.name" :name="g.groupId" class="h-full"  >
                    <List :nifi="nifi" :group-id="g.groupId" :id="g.id" @add-group="handleAddGroup" @close="handleClose"></List>
                </ElTabPane>
            </template>
        </ElTabs>
    </div>

</template>
